---
id: 61a5bfe091060f1d6a629dd0
title: Schritt 64
challengeType: 0
dashedName: step-64
---

# --description--

Auch ohne die Farbmarkierungen ist dir vielleicht aufgefallen, dass die Farben für die grüne Markierung an denselben Punkten ineinander übergehen wie die rote Markierung. Die erste Farbe ist am Anfang (0%), die zweite ist in der Mitte (50%) und die letzte ist am Ende (100%) der Farbverlaufslinie.

Die Funktion `linear-gradient` berechnet diese Werte automatisch für dich und platziert die Farben standardmäßig gleichmäßig entlang der Verlaufslinie.

Entferne in der CSS-Regel `.red` die drei Farben aus der Funktion `linear-gradient`, um deinen Code ein wenig zu vereinfachen.

# --hints--

Deine `.red` CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))` gesetzt haben.

```js
assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

--fcc-editable-region--
.red {
  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
}
--fcc-editable-region--

.green {
  background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

```
